<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="XAdmin/commons/header"></div>
<style>
    .a1 {
        height: 45px;
        line-height: 45px;
        margin-bottom: 5%;
    }

    .test-5 {
        overflow: scroll;
    }

    .test-5::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .test-5::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background-color: skyblue;
        background-image: -webkit-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.2) 75%,
                transparent 75%,
                transparent
        );
    }

    .test-5::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ededed;
        border-radius: 10px;
    }

    .left-nav #nav li a cite {
        color: white;
    }
</style>
<body class="index" style="background-color: white">

<div id="app">
    <!-- 顶部开始 -->
    <div class="container" style="background-color: #323956">
        <div class="logo">
        </div>
        <div class="logo">
            <a style="background-color: rgb(50, 57, 86);height: 200px;"><img width="50px" height="50px"
                                                                             style="border-radius: 50%;margin: 12% 0 0 31%;"
                                                                             src="">
                <br>
                <span style="margin-left: 26%;font-weight: bold;font-size: larger;font-family: monospace;">{{userInfo.nickname}}</span>
            </a>
            <span style="color: white;font-size: 24px;line-height:45px ">朔西湖预定系统</span>
        </div>

        <!--        <div class="left_open">-->
        <!--            <a><i title="展开左侧栏" class="iconfont">&#xe699;</i></a>-->
        <!--        </div>-->
        <ul class="layui-nav right" lay-filter="" style="margin-top: -56px">
            <li class="layui-nav-item" style="margin-top: 15%">
                <a class="a1" @click="logout" href="javascript:;"><b>退出</b></a>
                <!--                <dl class="layui-nav-child">-->
                <!--                    &lt;!&ndash; 二级菜单 &ndash;&gt;-->
                <!--                    <dd>-->
                <!--                        <a onclick="xadmin.open('打开网页','http://www.baidu.com')">打开网页</a></dd>-->
                <!--                    <dd>-->
                <!--                                                <a @click="logout">退出</a></dd>-->
                <!--                                                <a href="./login">工作台</a>-->
                <!--                    </dd>-->
                <!--                </dl>-->
            </li>
        </ul>
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <!-- 左侧菜单开始 -->
    <div class="left-nav test-5" style="background-color: #323956;margin-top:5%;overflow: auto">
        <div id="side-nav">
            <ul id="nav">
                <li><a @click="toHome" href="javascript:void(0)" one-link-mark="yes">
                    <i lay-tips="用户管理" class="iconfont left-nav-li"> </i>
                    <cite>工作台</cite></a>
                </li>
                <li v-for="(item,index) in route">
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" :lay-tips="item.title"> &#xe6ce;</i>
                        <cite>{{item.title}}</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul v-if="item.children != ''" class="sub-menu">
                        <li v-if="children.children == ''" v-for="(children,index) in item.children">

                            <a target="_blank" :href="children.url"
                               v-if="children.url === 'https://dysms.console.aliyun.com/dysms.htm'"><i class="iconfont">&nbsp;</i>
                                <cite style="color: #00C1DE">{{children.title}}</cite>
                            </a>
                            <a v-else @click="addTab(children)">
                                <i class="iconfont">&nbsp;</i>
                                <cite>{{children.title}}</cite>
                            </a>

                        </li>
                        <li v-if="children.children != ''" v-for="(children,index) in item.children">
                            <a>
                                <i class="iconfont">&#xe6b8;</i>
                                <cite>{{children.title}}</cite>
                                <i class="iconfont nav_right">&#xe697;</i>
                            </a>
                            <ul v-if="children.children != ''" class="sub-menu">
                                <li v-for="(c,index) in children.children">
                                    <a @click="addTab(c)">
                                        <i class="iconfont">&#xe6a7;</i>
                                        <cite>{{c.title}}</cite>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- <div class="x-slide_left"></div> -->
    <!-- 左侧菜单结束 -->
    <!-- 右侧主体开始 -->
    <div class="page-content">
        <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
            <ul class="layui-tab-title">
                <li class="home">
                    <i class="layui-icon">&#xe68e;</i>我的桌面
                </li>
            </ul>
            <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
                <dl>
                    <dd data-type="this">关闭当前</dd>
                    <dd data-type="other">关闭其它</dd>
                    <dd data-type="all">关闭全部</dd>
                </dl>
            </div>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe id="some_frame_id" src='welcome' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                </div>
            </div>
            <div id="tab_show"></div>
        </div>
    </div>
    <div class="page-content-bg"></div>
    <!-- 右侧主体结束 -->
    <!-- 中部结束 -->
</div>

<script>

    const vm = new Vue({
        el: "#app",
        data: {
            userInfo: $userInfo,
            route: $route,
        },
        mounted() {
        },
        methods: {
            addTab(item) {
                xadmin.add_tab(item.title, item.url, true);
            },
            toHome() {
                $(".home").click();
            },
            // onclick(item) {
            //     xadmin.add_tab(item.title, item.url, true);
            // },
            logout() {
                layer.confirm('是否确认退出?', {
                    icon: 3
                }, function (index) {
                    let request = {
                        url: "admin/logout",
                        data: {},
                        method: 'post',
                        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                    };
                    sendRequest(request, (res) => {
                        // console.log(res);
                        layer.close(index);
                        window.location.href = 'login';
                    })
                });

            }
        },
        computed: {}
    });
    // loadWebsocket();

    $(".home").click(function () {
        document.getElementById('some_frame_id').contentWindow.location.reload();
    });
</script>
</body>

</html>